<template>
  <div class="header">
    <div class="header_am_pm_morrow">
      <div class="am">{{ curTime }}上午</div>
      <div class="pm">{{ curTime }}下午</div>
      <div class="morrow">
        {{ dayjs(curTime).add(1, 'day').format('YYYY-MM-DD') }}上午
      </div>
    </div>
    <div class="header_hour">
      <div class="hour" v-for="(item, index) in dataList" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

const props = defineProps({
  unitWidth: {
    type: Number,
    default: 60
  },
  unitNum: {
    type: Number,
    default: 0
  },
  headerHeight: {
    type: Number,
    default: 50
  },
  curTime: {
    type: String,
    default: ''
  },
  // 单位时间（分钟）
  unitTime: {
    type: Number,
    default: 60
  }
})

let dataList = ref([])

const _hourWidth = computed(() => {
  console.log('头部item宽度', props.unitWidth)
  return props.unitWidth + 'px'
})

const _rowHeight = computed(() => {
  return props.headerHeight / 2 + 'px'
})

const pmAmWidth = computed(() => {
  return props.unitWidth * 12 + 'px'
})

const morrowWidth = computed(() => {
  return props.unitWidth * (props.unitNum - 24) + 'px'
})

watch(
  () => props.unitNum,
  (val) => {
    dataList.value = []
    let start = dayjs(props.curTime)
    const step = dayjs.duration(props.unitTime, 'minute').asMilliseconds()
    for (let i = 0; i < val; i++) {
      const stepTime = start.add(i * step, 'ms').format('YYYY-MM-DD HH:mm:ss')
      dataList.value.push(dayjs(stepTime).format('HH:mm'))
    }
    console.log('steps***************', dataList.value)
  }
)
// 根据curTime + unitNum计算时间刻度
</script>

<style lang="scss" scoped>
.header_am_pm_morrow {
  display: flex;
  box-sizing: border-box;
  width: calc(v-bind(pmAmWidth) * 2 + v-bind(morrowWidth));
  height: v-bind(_rowHeight);
  border: 1px solid #ebeef5;
  box-sizing: border-box;
  .am,
  .pm,
  .morrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: v-bind(pmAmWidth);
    height: 100%;
    border-right: none;
    background-color: #f0f0f0;
    box-sizing: border-box;
  }
  .morrow {
    width: v-bind(morrowWidth);
  }
  .am,
  .pm {
    border-right: 1px solid #ccc;
  }
}
.header_hour {
  display: flex;
  width: calc(v-bind(pmAmWidth) * 2 + v-bind(morrowWidth));
  .hour {
    display: flex;
    justify-content: center;
    align-items: center;
    width: v-bind(_hourWidth);
    height: v-bind(_rowHeight);
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
  .hour:first-child {
    border-left: 1px solid #ebeef5;
  }
}
</style>
